<template>
  <div class="package-intro">
    <h1>公司套餐介绍</h1>
    
    <section class="assets">
      <h2>资产管理</h2>
      <p>到期日期：{{ asset.expiryDate }}</p>
      <p>资产数量：{{ asset.used }} / {{ asset.total }}</p>
      <p>描述：{{ asset.description }}</p>
    </section>

    <section class="supplies">
      <h2>耗材管理</h2>
      <p>到期日期：{{ supplies.expiryDate }}</p>
      <p>描述：{{ supplies.description }}</p>
    </section>

    <section class="storage">
      <h2>资源存储空间</h2>
      <p>已使用：{{ storage.used }} / {{ storage.total }}</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asset: {
        expiryDate: '2034-05-22',
        used: 28,
        total: 10000,
        description: '实现资产全生命周期的管理，解决固定资产账目乱，账实不符，流失严重，闲置率高，养护混乱，利用率低等痛点'
      },
      supplies: {
        expiryDate: '2025-05-25',
        description: '低值用品、办公用品管理、出入库登记，一站式管理，实现耗材精细化管控'
      },
      storage: {
        used: '2.63 MB',
        total: '5 GB'
      }
    };
  }
};
</script>

<style scoped>
.package-intro {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  color: #333;
}

section {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h2 {
  color: #007BFF;
}
</style>
